<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录界面</title>
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/body.css">
  <script src="./js/jquery.js"></script>
</head>

<body>
  <div class="container">
    <section id="content">
      <form>
        <h1>账号登录</h1>
        </h1>
        <div class="phone">
          <i class="close">X</i>
          <input type="text" placeholder="手机号" id="username">

        </div>
        <div class="pwd">
          <i class="close">X</i>
          <input type="password" placeholder="密码" id="password">

        </div>
        <div>
          <input type="submit" value="登录" class="btn btn-primary" id="js-btn-login">
          <a href="">忘记密码?</a>
          <a href="#">注册账号</a>
        </div>
      </form>
    </section>
  </div>


  <script>
    $(function () {
      const username = $('#username')
      const password = $('#password')
      const span1 = $('</br><span style="color: red; float:left; margin-left:10px;"></span>')
      const span2 = $('</br><span style="color: red; float:left; margin-left:10px;"></span>')
      $('.phone').append(span1)
      $('.pwd').append(span2)

      $('#js-btn-login').on('click', function () {
        if (username.val().trim() === '' || password.val().trim() === '') {
          alert('沙贝')
          span1.html('请输入手机号')
          span2.html('请输入密码')
        }
      })

      username.on('change', function () {
        $('.phone .close').show()
        const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
        if (!reg.test(username.val().trim())) {
          span1.html('输入格式不正确')
        } else {
          span1.html('')
        }
      })

      password.on('change', function () {
        $('.pwd .close').show()
      })

      $('.phone .close').on('click', function () {
        $(this).hide()
        span1.html('')
        username.val('')
      })
      $('.pwd .close').on('click', function () {
        $(this).hide()
        span2.html('')
        password.val('')
      })

      $('form').on('submit', function (e) {
        e.preventDefault()
        $.ajax({
          method: 'POST',
          url: 'http://124.223.14.236:3001/api/user/login',
          data: {
            username: username.val().trim(),
            password: password.val().trim()
          },
          success(res) {
            console.log(res);
          }
        })
      })
    })
  </script>

  <!-- <script>
    $(function () {

      let username = $('#username')
      let password = $('#password')
      const span1 = $('</br><span style="color: red; float:left; margin-left:10px;"></span>')
      const span2 = $('</br><span style="color: red; float:left; margin-left:10px;"></span>')
      $('.phone').append(span1)
      $('.pwd').append(span2)

      // 点击登录按钮
      $('#js-btn-login').on('click', function () {
        if (username.val().trim() === '' || password.val().trim() === '') {
          alert('数据校验不通过')
          span1.html('请输入手机号')
          span2.html('请输入密码')
        }
      })

      // 输入手机号
      username.on('change', function () {
        // 有内容输入时，X号出现
        $('.phone .close').show()
        // 正则判断
        const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
        console.log(reg.test(username.val().trim()));
        if (!reg.test(username.val().trim())) {
          span1.html('输入格式不正确')
        } else {
          span1.html('')
        }

        // 输入密码
        password.on('change', function () {
          $('.pwd .close').show()
          // 正则
          const reg = /^[a-zA-Z0-9-_]{6,20}$/
          if (!reg.test(password.val().trim())) {
            span2.html('输入格式不正确')
          } else {
            span2.html('')
          }
        })

        // 点击X号
        $('.phone .close').on('click', function () {
          $(this).hide()
          span1.html('')
          username.val('')
        })
        $('.pwd .close').on('click', function () {
          $(this).hide()
          span2.html('')
          password.val('')
        })

        // 提交数据
        $('form').on('submit', function (e) {
          // 阻止默认提交行为
          e.preventDefault()
          // 发送ajax数据请求
          // const data = $('form').serialize()
          $.ajax({
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/formdata',
            data: {
              username: username.val(),
              password: password.val()
            },
            success(res) {
              console.log(res)
            }
          })
       ) }
      )}
  </script> -->

</body>

</html>